<template>
  <div class="process-monitoring-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2>流程监控</h2>
        <p>实时监控所有审批流程的运行状态</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button @click="exportData">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 监控概览 -->
    <div class="monitoring-overview">
      <div class="overview-card running">
        <div class="card-icon">
          <el-icon><Timer /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ runningCount }}</div>
          <div class="card-label">运行中流程</div>
        </div>
        <div class="card-trend">
          <el-icon class="trend-up"><TrendCharts /></el-icon>
          <span>+12%</span>
        </div>
      </div>
      
      <div class="overview-card pending">
        <div class="card-icon">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ pendingCount }}</div>
          <div class="card-label">待处理任务</div>
        </div>
        <div class="card-trend">
          <el-icon class="trend-down"><TrendCharts /></el-icon>
          <span>-5%</span>
        </div>
      </div>
      
      <div class="overview-card overdue">
        <div class="card-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ overdueCount }}</div>
          <div class="card-label">超时流程</div>
        </div>
        <div class="card-trend">
          <el-icon class="trend-up warning"><TrendCharts /></el-icon>
          <span>+3</span>
        </div>
      </div>
      
      <div class="overview-card efficiency">
        <div class="card-icon">
          <el-icon><DataAnalysis /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ avgEfficiency }}%</div>
          <div class="card-label">平均效率</div>
        </div>
        <div class="card-trend">
          <el-icon class="trend-up"><TrendCharts /></el-icon>
          <span>+8%</span>
        </div>
      </div>
    </div>

    <!-- 实时监控图表 -->
    <div class="monitoring-charts">
      <div class="chart-container">
        <div class="chart-header">
          <h3>流程处理趋势</h3>
          <el-radio-group v-model="trendPeriod" size="small">
            <el-radio-button label="today">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart-content" ref="trendChart" style="height: 300px;"></div>
      </div>
      
      <div class="chart-container">
        <div class="chart-header">
          <h3>流程类型分布</h3>
        </div>
        <div class="chart-content" ref="typeChart" style="height: 300px;"></div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索流程"
        style="width: 300px; margin-right: 15px;"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-select v-model="statusFilter" placeholder="流程状态" style="width: 120px; margin-right: 15px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="运行中" value="running"></el-option>
        <el-option label="已完成" value="completed"></el-option>
        <el-option label="已暂停" value="paused"></el-option>
        <el-option label="已终止" value="terminated"></el-option>
      </el-select>
      <el-select v-model="typeFilter" placeholder="流程类型" style="width: 150px; margin-right: 15px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="请假申请" value="请假申请"></el-option>
        <el-option label="加班申请" value="加班申请"></el-option>
        <el-option label="报销申请" value="报销申请"></el-option>
        <el-option label="调休申请" value="调休申请"></el-option>
        <el-option label="出差申请" value="出差申请"></el-option>
        <el-option label="采购申请" value="采购申请"></el-option>
      </el-select>
      <el-select v-model="priorityFilter" placeholder="优先级" style="width: 120px; margin-right: 15px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="低" value="low"></el-option>
        <el-option label="中" value="medium"></el-option>
        <el-option label="高" value="high"></el-option>
        <el-option label="紧急" value="urgent"></el-option>
      </el-select>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 240px;"
      ></el-date-picker>
    </div>

    <!-- 流程监控表格 -->
    <div class="monitoring-table">
      <el-table :data="filteredProcesses" style="width: 100%" stripe>
        <el-table-column prop="processId" label="流程ID" width="120"></el-table-column>
        <el-table-column prop="title" label="流程标题" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="initiator" label="发起人" width="100"></el-table-column>
        <el-table-column prop="type" label="流程类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="流程状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              <el-icon v-if="row.status === 'running'" class="rotating"><Loading /></el-icon>
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="currentNode" label="当前节点" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="currentApprover" label="当前处理人" width="120"></el-table-column>
        <el-table-column prop="priority" label="优先级" width="80">
          <template #default="{ row }">
            <el-tag :type="getPriorityTagType(row.priority)" size="small">{{ getPriorityText(row.priority) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column label="运行时长" width="100">
          <template #default="{ row }">
            {{ getDuration(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column label="进度" width="120">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" :status="getProgressStatus(row.status)" :stroke-width="6"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="viewProcess(row)">查看</el-button>
            <el-button size="small" type="info" @click="viewTimeline(row)">时间线</el-button>
            <el-dropdown v-if="row.status === 'running'" trigger="click">
              <el-button size="small" type="warning">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="pauseProcess(row)">暂停流程</el-dropdown-item>
                  <el-dropdown-item @click="terminateProcess(row)">终止流程</el-dropdown-item>
                  <el-dropdown-item @click="transferProcess(row)">转交处理</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalProcesses"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 流程详情对话框 -->
    <el-dialog
      v-model="showProcessDialog"
      title="流程详情"
      width="800px"
    >
      <div v-if="currentProcess" class="process-detail">
        <!-- 基本信息 -->
        <div class="basic-info">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="流程ID">{{ currentProcess.processId }}</el-descriptions-item>
            <el-descriptions-item label="流程标题">{{ currentProcess.title }}</el-descriptions-item>
            <el-descriptions-item label="发起人">{{ currentProcess.initiator }}</el-descriptions-item>
            <el-descriptions-item label="流程类型">
              <el-tag :type="getTypeTagType(currentProcess.type)">{{ currentProcess.type }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="流程状态">
              <el-tag :type="getStatusTagType(currentProcess.status)">{{ getStatusText(currentProcess.status) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <el-tag :type="getPriorityTagType(currentProcess.priority)">{{ getPriorityText(currentProcess.priority) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ formatTime(currentProcess.startTime) }}</el-descriptions-item>
            <el-descriptions-item label="运行时长">{{ getDuration(currentProcess.startTime) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 当前状态 -->
        <div class="current-status">
          <h4>当前状态</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="当前节点">{{ currentProcess.currentNode }}</el-descriptions-item>
            <el-descriptions-item label="当前处理人">{{ currentProcess.currentApprover }}</el-descriptions-item>
            <el-descriptions-item label="节点开始时间">{{ formatTime(currentProcess.nodeStartTime) }}</el-descriptions-item>
            <el-descriptions-item label="节点运行时长">{{ getDuration(currentProcess.nodeStartTime) }}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{ formatTime(currentProcess.estimatedTime) }}</el-descriptions-item>
            <el-descriptions-item label="完成进度">
              <el-progress :percentage="currentProcess.progress" :status="getProgressStatus(currentProcess.status)"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 性能指标 -->
        <div class="performance-metrics">
          <h4>性能指标</h4>
          <div class="metrics-grid">
            <div class="metric-item">
              <div class="metric-label">平均处理时间</div>
              <div class="metric-value">{{ currentProcess.avgProcessTime || '2.5小时' }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">节点通过率</div>
              <div class="metric-value">{{ currentProcess.passRate || '95%' }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">超时风险</div>
              <div class="metric-value" :class="getRiskClass(currentProcess.timeoutRisk || 'low')">{{ getRiskText(currentProcess.timeoutRisk || 'low') }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">流程效率</div>
              <div class="metric-value">{{ currentProcess.efficiency || '88%' }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 时间线对话框 -->
    <el-dialog
      v-model="showTimelineDialog"
      title="流程时间线"
      width="800px"
    >
      <div class="process-timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(event, index) in processTimeline"
            :key="index"
            :timestamp="formatTime(event.time)"
            :type="getTimelineType(event.type)"
            :hollow="event.status === 'pending'"
          >
            <div class="timeline-event">
              <div class="event-header">
                <span class="event-title">{{ event.title }}</span>
                <span class="event-user">{{ event.user }}</span>
              </div>
              <div class="event-content">{{ event.content }}</div>
              <div v-if="event.duration" class="event-duration">
                <el-tag size="small" type="info">耗时: {{ event.duration }}</el-tag>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Download, Search, Refresh, Timer, Clock, Warning, DataAnalysis,
  TrendCharts, Loading, ArrowDown
} from '@element-plus/icons-vue'

// 响应式数据
const searchKeyword = ref('')
const statusFilter = ref('')
const typeFilter = ref('')
const priorityFilter = ref('')
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const totalProcesses = ref(0)
const trendPeriod = ref('today')
const showProcessDialog = ref(false)
const showTimelineDialog = ref(false)
const currentProcess = ref(null)
const trendChart = ref(null)
const typeChart = ref(null)

// 流程监控数据
const processes = ref([
  {
    processId: 'P2024011501',
    title: '张三的年假申请',
    initiator: '张三',
    type: '请假申请',
    status: 'running',
    currentNode: '部门经理审批',
    currentApprover: '李经理',
    priority: 'medium',
    startTime: new Date('2024-01-15 09:00:00'),
    nodeStartTime: new Date('2024-01-15 14:30:00'),
    estimatedTime: new Date('2024-01-16 18:00:00'),
    progress: 60
  },
  {
    processId: 'P2024011502',
    title: '李四的加班申请',
    initiator: '李四',
    type: '加班申请',
    status: 'running',
    currentNode: '总监审批',
    currentApprover: '王总监',
    priority: 'high',
    startTime: new Date('2024-01-15 10:30:00'),
    nodeStartTime: new Date('2024-01-15 16:00:00'),
    estimatedTime: new Date('2024-01-15 20:00:00'),
    progress: 80
  },
  {
    processId: 'P2024011503',
    title: '王五的报销申请',
    initiator: '王五',
    type: '报销申请',
    status: 'paused',
    currentNode: '财务审核',
    currentApprover: '财务部',
    priority: 'low',
    startTime: new Date('2024-01-15 08:15:00'),
    nodeStartTime: new Date('2024-01-15 11:45:00'),
    estimatedTime: new Date('2024-01-17 12:00:00'),
    progress: 40
  },
  {
    processId: 'P2024011504',
    title: '赵六的出差申请',
    initiator: '赵六',
    type: '出差申请',
    status: 'completed',
    currentNode: '已完成',
    currentApprover: '已完成',
    priority: 'medium',
    startTime: new Date('2024-01-14 09:20:00'),
    nodeStartTime: new Date('2024-01-14 15:30:00'),
    estimatedTime: new Date('2024-01-14 18:00:00'),
    progress: 100
  },
  {
    processId: 'P2024011505',
    title: '孙七的采购申请',
    initiator: '孙七',
    type: '采购申请',
    status: 'running',
    currentNode: '采购部审核',
    currentApprover: '采购部',
    priority: 'urgent',
    startTime: new Date('2024-01-15 16:45:00'),
    nodeStartTime: new Date('2024-01-15 17:00:00'),
    estimatedTime: new Date('2024-01-15 19:00:00'),
    progress: 25
  }
])

// 时间线数据
const processTimeline = ref([
  {
    title: '流程发起',
    user: '张三',
    time: new Date('2024-01-15 09:00:00'),
    content: '提交年假申请，申请时间：2024年1月20日-1月25日',
    type: 'primary',
    status: 'completed',
    duration: '0分钟'
  },
  {
    title: '自动分配',
    user: '系统',
    time: new Date('2024-01-15 09:01:00'),
    content: '系统自动分配给部门经理李经理处理',
    type: 'info',
    status: 'completed',
    duration: '1分钟'
  },
  {
    title: '部门经理审批',
    user: '李经理',
    time: new Date('2024-01-15 14:30:00'),
    content: '正在审批中...',
    type: 'warning',
    status: 'current'
  },
  {
    title: '人事部备案',
    user: '人事部',
    time: null,
    content: '等待上一节点完成',
    type: 'info',
    status: 'pending'
  }
])

// 计算属性
const filteredProcesses = computed(() => {
  let filtered = processes.value
  
  if (searchKeyword.value) {
    filtered = filtered.filter(process => 
      process.title.includes(searchKeyword.value) || 
      process.initiator.includes(searchKeyword.value) ||
      process.processId.includes(searchKeyword.value)
    )
  }
  
  if (statusFilter.value) {
    filtered = filtered.filter(process => process.status === statusFilter.value)
  }
  
  if (typeFilter.value) {
    filtered = filtered.filter(process => process.type === typeFilter.value)
  }
  
  if (priorityFilter.value) {
    filtered = filtered.filter(process => process.priority === priorityFilter.value)
  }
  
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value
    filtered = filtered.filter(process => {
      const startTime = new Date(process.startTime)
      return startTime >= startDate && startTime <= endDate
    })
  }
  
  return filtered
})

const runningCount = computed(() => {
  return processes.value.filter(p => p.status === 'running').length
})

const pendingCount = computed(() => {
  return processes.value.filter(p => p.status === 'running').reduce((sum, p) => {
    // 假设每个运行中的流程有1-3个待处理任务
    return sum + Math.floor(Math.random() * 3) + 1
  }, 0)
})

const overdueCount = computed(() => {
  return processes.value.filter(p => {
    if (p.status !== 'running') return false
    const now = new Date()
    const estimated = new Date(p.estimatedTime)
    return now > estimated
  }).length
})

const avgEfficiency = computed(() => {
  const efficiencies = processes.value.map(p => p.progress || 0)
  const avg = efficiencies.reduce((sum, eff) => sum + eff, 0) / efficiencies.length
  return Math.round(avg)
})

// 方法
const getTypeTagType = (type) => {
  const typeMap = {
    '请假申请': 'primary',
    '加班申请': 'success',
    '报销申请': 'warning',
    '调休申请': 'info',
    '出差申请': '',
    '采购申请': 'danger'
  }
  return typeMap[type] || 'default'
}

const getStatusTagType = (status) => {
  const statusMap = {
    'running': 'primary',
    'completed': 'success',
    'paused': 'warning',
    'terminated': 'danger'
  }
  return statusMap[status] || 'default'
}

const getStatusText = (status) => {
  const statusMap = {
    'running': '运行中',
    'completed': '已完成',
    'paused': '已暂停',
    'terminated': '已终止'
  }
  return statusMap[status] || status
}

const getPriorityTagType = (priority) => {
  const priorityMap = {
    'low': 'info',
    'medium': '',
    'high': 'warning',
    'urgent': 'danger'
  }
  return priorityMap[priority] || 'default'
}

const getPriorityText = (priority) => {
  const priorityMap = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'urgent': '紧急'
  }
  return priorityMap[priority] || priority
}

const getProgressStatus = (status) => {
  const statusMap = {
    'running': '',
    'completed': 'success',
    'paused': 'warning',
    'terminated': 'exception'
  }
  return statusMap[status] || ''
}

const getTimelineType = (type) => {
  const typeMap = {
    'primary': 'primary',
    'success': 'success',
    'warning': 'warning',
    'danger': 'danger',
    'info': 'info'
  }
  return typeMap[type] || 'primary'
}

const getRiskClass = (risk) => {
  const riskMap = {
    'low': 'risk-low',
    'medium': 'risk-medium',
    'high': 'risk-high'
  }
  return riskMap[risk] || 'risk-low'
}

const getRiskText = (risk) => {
  const riskMap = {
    'low': '低风险',
    'medium': '中风险',
    'high': '高风险'
  }
  return riskMap[risk] || risk
}

const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString('zh-CN')
}

const getDuration = (startTime) => {
  if (!startTime) return ''
  const now = new Date()
  const start = new Date(startTime)
  const duration = now - start
  
  const days = Math.floor(duration / (1000 * 60 * 60 * 24))
  const hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
  
  if (days > 0) {
    return `${days}天${hours}小时`
  } else if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  } else {
    return `${minutes}分钟`
  }
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
  // 这里实现数据刷新逻辑
}

const exportData = () => {
  ElMessage.success('报告导出功能开发中...')
}

const viewProcess = (process) => {
  currentProcess.value = process
  showProcessDialog.value = true
}

const viewTimeline = (process) => {
  currentProcess.value = process
  showTimelineDialog.value = true
  // 这里可以根据流程ID获取具体的时间线数据
}

const pauseProcess = async (process) => {
  try {
    await ElMessageBox.confirm('确定要暂停此流程吗？', '确认操作', {
      type: 'warning'
    })
    process.status = 'paused'
    ElMessage.success('流程已暂停')
  } catch {
    // 用户取消操作
  }
}

const terminateProcess = async (process) => {
  try {
    await ElMessageBox.confirm('确定要终止此流程吗？此操作不可撤销！', '确认操作', {
      type: 'warning'
    })
    process.status = 'terminated'
    ElMessage.success('流程已终止')
  } catch {
    // 用户取消操作
  }
}

const transferProcess = (process) => {
  ElMessage.success('转交处理功能开发中...')
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

// 初始化图表
const initCharts = () => {
  // 这里可以使用 ECharts 或其他图表库初始化图表
  // 由于没有引入图表库，这里只是占位
  console.log('初始化图表')
}

// 生命周期
onMounted(() => {
  totalProcesses.value = processes.value.length
  nextTick(() => {
    initCharts()
  })
})
</script>

<style scoped>
.process-monitoring-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left h2 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 24px;
}

.header-left p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.monitoring-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.overview-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.overview-card.running {
  border-left: 4px solid #409eff;
}

.overview-card.pending {
  border-left: 4px solid #e6a23c;
}

.overview-card.overdue {
  border-left: 4px solid #f56c6c;
}

.overview-card.efficiency {
  border-left: 4px solid #67c23a;
}

.card-icon {
  font-size: 32px;
  margin-right: 15px;
  color: #666;
}

.card-content {
  flex: 1;
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  color: #666;
}

.card-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #67c23a;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
  transform: rotate(180deg);
}

.trend-up.warning {
  color: #e6a23c;
}

.monitoring-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.chart-content {
  background: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

.filter-section {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.monitoring-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.rotating {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.pagination-section {
  text-align: right;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.process-detail {
  padding: 10px 0;
}

.basic-info,
.current-status,
.performance-metrics {
  margin-bottom: 20px;
}

.basic-info h4,
.current-status h4,
.performance-metrics h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.current-status,
.performance-metrics {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.metric-item {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.metric-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.risk-low {
  color: #67c23a;
}

.risk-medium {
  color: #e6a23c;
}

.risk-high {
  color: #f56c6c;
}

.process-timeline {
  padding: 10px 0;
}

.timeline-event {
  margin-bottom: 10px;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.event-title {
  font-weight: 600;
  color: #333;
}

.event-user {
  color: #666;
  font-size: 14px;
}

.event-content {
  color: #666;
  line-height: 1.5;
  margin-bottom: 5px;
}

.event-duration {
  margin-top: 5px;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

:deep(.el-progress-bar__outer) {
  border-radius: 3px;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 12px;
}
</style>